<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>贝塞尔</title>
    <style type="text/css">
        body{
            margin: 0;
        }

        #canvas, #canvas2{
            margin: 40px 0;
            box-shadow: 4px 4px 8px 4px rgba(0,0,0,.4);
        }
    </style>
</head>
<body>

    <canvas id="canvas">
        Canvas not supported
    </canvas>

    <canvas id="canvas2" width=300 height=300>
        Canvas not supported
    </canvas>

    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight/2;

        var startP = {
                x:canvas.width/5,
                y:canvas.height/2
            },
            midP = {
                x:canvas.width/3,
                y:canvas.height/3
            },
            endP = {
                x:canvas.width*4/5,
                y:canvas.height/2
            },

            dragging = false;


        function drawQuadratic(){
            context.beginPath();
            context.save();
            context.clearRect(0, 0, canvas.width, canvas.height);
            context.moveTo(startP.x, startP.y);
            context.quadraticCurveTo(midP.x, midP.y, endP.x, endP.y);
            context.stroke();
            context.restore();
        }

        function windowToCanvas(e){
            var bbox = canvas.getBoundingClientRect();
            return {
                x:e.clientX - bbox.left*(canvas.width/bbox.width),
                y:e.clientY- bbox.top*(canvas.height/bbox.height)
            }
        }

        canvas.onmousedown = function(e){            
            e.preventDefault();
            dragging = true
        }

        canvas.onmousemove = function(e){
            if(dragging){
                e.preventDefault()
                midP = windowToCanvas(e);
                drawQuadratic();
            }
        }

        canvas.onmouseup = function(e){
            e.preventDefault();
            midP = windowToCanvas(e);
            drawQuadratic();
            dragging = false;
        }

        drawQuadratic();


    </script>


    <script type="text/javascript">
        var canvas2 = document.getElementById("canvas2"),
            context2 = canvas2.getContext("2d");

        canvas2.width = window.innerWidth;
        canvas2.height = window.innerHeight/2;

        var drag = false,
            sP = {
                x:canvas2.width/5,
                y:canvas2.height/2
            },
            mP = {
                x:canvas2.width/4,
                y:canvas2.height/2
            },
            mP2 = {
                x:canvas2.width*2/3,
                y:canvas2.height/3
            },
            eP = {
                x:canvas2.width*4/5,
                y:canvas2.height/2
            },
            flag = 0;

        function windowToCanvas2(e){
            var bbox = canvas2.getBoundingClientRect();
            return {
                x:e.clientX - bbox.left*(canvas.width/bbox.width),
                y:e.clientY- bbox.top*(canvas.height/bbox.height)
            }
        }

        function drawPoint(p){
            context2.beginPath();
            context2.arc(p.x, p.y, 20, 0, Math.PI*2, true);
            context2.fill();
        }


        function drawBezier(){
            context2.beginPath();
            context2.save();
            context2.clearRect(0,0,canvas2.width, canvas2.height);
            context2.moveTo(sP.x, sP.y);
            context2.bezierCurveTo(mP.x, mP.y, mP2.x, mP2.y, eP.x, eP.y);
            context2.stroke();
            drawPoint(mP);
            drawPoint(mP2);
            context2.restore();
        }


        function isFocused(target, current){
            return Math.abs(current.x-target.x)<20 && Math.abs(current.y-target.y)<20
        }

        canvas2.onmousedown = function(e){
            e.preventDefault();
            down = windowToCanvas2(e);

            if(isFocused(mP, down)){
                dragging = true;
                flag = 0;
                mP = down;
            }else if(isFocused(mP2, down)){
                dragging = true;
                flag = 1;
                mP2 = down;
            }else{
                dragging = false;
            }
            drawBezier();
        }

        canvas2.onmousemove = function(e){
            if (dragging) {
                e.preventDefault();
                if(flag === 0){
                    mP = windowToCanvas2(e);
                }else{
                    mP2 = windowToCanvas2(e);
                }
                drawBezier();
            }
        }



        canvas2.onmouseup = function(e){

            dragging = false;
        }

        drawBezier();

    </script>

</body>
</html>